<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>College_Harmony</title>
		<link href="css/common.css" rel="stylesheet" type="text/css"/>
		<link href="css/custom.css" rel="stylesheet" type="text/css" />
		<link href="css/UI.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery1.7.2.js"></script>
			<script type="text/javascript">
		$(document).ready(function(){
			$('#header').load('common/header.html','',function(){
				$("#header .menu li a").removeClass("current_page");
          		$("a#ch").addClass("current_page");
			});
			$('#footer').load('common/footer.html');
		});
		</script>
		<script type="text/javascript" src="js/custom_form_element.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#imM").click(function(){
					$("#imTitle").attr("class","boy_bg");
				});
				$("#imF").click(function(){
					$("#imTitle").attr("class","girl_bg");
				});
				$("#lookM").click(function(){
					$("#lookTitle").attr("class","boy_bg");
				});
				$("#lookF").click(function(){
					$("#lookTitle").attr("class","girl_bg");
				});
			});
		</script>
	</head>

	<body>
			<div id="header"></div>
			
			
			<div class="College_body">
			<div class="College_bg_top"></div>
			<div class="College_bg_repeat">
				<div class="body_topLeftBg">
				<div class="body_topRightBg">
						<div class="JComboBox">
							<div class="JComboBoxtop">
								<div class="left">
									<p><span id="imTitle" class="boy_bg">I’m a</span></p>
									<p><span  id="lookTitle" class="girl_bg">Looking for a</span></p>
								</div>
								<div class="right">
									<p><input type="radio" checked="checked" class="styled" name="im" id="imM"/><label for="imM" class="pitch-on_black">Male</label>
									<input type="radio"  class="styled" name="im" id="imF"/><label for="imF" class="unchecked">Female</label></p>
									
									<p><input type="radio" class="styled" name="lm" id="lookM"/><label for="lookM" class="pitch-on_black">Male</label>
									<input type="radio" class="styled" name="lm" id="lookF" checked="checked"/><label for="lookF" class="unchecked">Female</label></p>
								</div>
							</div>
							<div class="JComboBoxfoot">
								<h6>What r u looking for?</h6>
								<div class="btn">
									<a href="ch_list_Friends.html">
									<div class="greenbtn">
										<span class="left"></span>
										<span class="repeat">
											<p class="beerBG">Friend</p>
										</span>
										<span class="right"></span>
									</div>
									</a>
									<a href="ch_list_Date.html">
									<div class="pinkbtn">
										<span class="left"></span>
										<span class="repeat">
											<p class="loveBG">Date</p>
										</span>
										<span class="right"></span>
									</div>
									</a>
								</div>
							</div>
						</div>
				</div>
				</div>
				<p class="ch_text">Where the right <span class="color_green">friends</span>/ <span class="color_pink">Dates</span> are?</p>
				<h1>College Harmony</h1>
				
				<div class="body_footLeftBg magrgin_b">
					<div class="body_footRightBg">
						<ul>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_wathet">Andrew Seroff</a>
								<p>Conrent</p> 
								<span>Age:<span>19</span></span>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo">
									<a href="ch_About_Me.html" target="_blank"><img src="img/photos/College-Harmony_women.jpg" /></a>
									</div>
								<a href="ch_About_Me.html" target="_blank" class="color_wathet">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man2.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_red">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man3.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_red">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man4.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_green">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man5.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_green">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man6.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_green">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><a href="ch_About_boy.html" target="_blank"><img src="img/photos/College-Harmony_man7.jpg" /></a></div>
								<a href="ch_About_boy.html" target="_blank" class="color_wathet">Andrew Seroff</a>
								<p>Conrent</p>
								<span>Alter-Ego:<span>Stan Marsh</span></span>
							</li>
							<li>
								<div class="use_photo"><img src="img/photos/College-Harmony_who.jpg" /></div>
								
								<p>?</p>
								<span>This Could Be You</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="body_foot"></div>
			</div>
			<div class="College_bg_foot"></div>
		</div>
		<div class="clear_float"></div>
		<div id="footer">
			
		</div>
		
	</body>
</html>
